<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山小学第二十七届运动会 - 五5班参赛查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.2em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .subtitle {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .search-section {
            padding: 25px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        
        .search-box {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }
        
        input, select, button {
            padding: 12px 18px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #4dabf7;
            box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
        }
        
        button {
            background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
            color: white;
            border: none;
            cursor: pointer;
            font-weight: bold;
            padding: 12px 25px;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .results-section {
            padding: 25px;
        }
        
        .stats {
            background: #e7f5ff;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 10px;
        }
        
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #1c7ed6;
        }
        
        .stat-label {
            font-size: 0.9em;
            color: #495057;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border-radius: 10px;
            overflow: hidden;
        }
        
        th {
            background: linear-gradient(135deg, #339af0 0%, #228be6 100%);
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
        }
        
        td {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
        }
        
        tr:hover {
            background-color: #f8f9fa;
            transform: scale(1.01);
            transition: all 0.2s ease;
        }
        
        .event-type {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: bold;
        }
        
        .personal {
            background: #fff3bf;
            color: #e67700;
        }
        
        .team {
            background: #d3f9d8;
            color: #2b8a3e;
        }
        
        .no-results {
            text-align: center;
            padding: 40px;
            color: #868e96;
            font-size: 1.1em;
        }
        
        .highlight {
            background-color: #fff3bf;
            font-weight: bold;
        }
        
        .need-supplement {
            color: #e03131;
            font-weight: bold;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .search-box {
                flex-direction: column;
            }
            
            input, select, button {
                width: 100%;
            }
            
            th, td {
                padding: 10px 5px;
                font-size: 14px;
            }
            
            .stats {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>中山小学第二十七届运动会</h1>
            <div class="subtitle">五5班参赛项目查询系统</div>
        </header>
        
        <section class="search-section">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="输入学生姓名搜索..." style="flex: 2;">
                <select id="dateFilter">
                    <option value="">所有日期</option>
                    <option value="10月14日">10月14日</option>
                    <option value="10月15日">10月15日</option>
                    <option value="10月16日">10月16日</option>
                    <option value="10月17日">10月17日</option>
                </select>
                <select id="typeFilter">
                    <option value="">所有类型</option>
                    <option value="personal">个人项目</option>
                    <option value="team">集体项目</option>
                </select>
                <button onclick="searchEvents()">搜索</button>
                <button onclick="resetSearch()" style="background: linear-gradient(135deg, #ff6b6b 0%, #fa5252 100%);">重置</button>
            </div>
        </section>
        
        <section class="results-section">
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number" id="totalCount">0</div>
                    <div class="stat-label">总参赛项目</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="studentCount">0</div>
                    <div class="stat-label">参赛学生</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="personalCount">0</div>
                    <div class="stat-label">个人项目</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="teamCount">0</div>
                    <div class="stat-label">集体项目</div>
                </div>
            </div>
            
            <div id="resultsTable">
                <table>
                    <thead>
                        <tr>
                            <th width="15%">日期</th>
                            <th width="15%">时间</th>
                            <th width="30%">项目名称</th>
                            <th width="25%">参赛学生</th>
                            <th width="15%">类型</th>
                        </tr>
                    </thead>
                    <tbody id="resultsBody">
                        <!-- 数据将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </section>
    </div>

    <script>
        // 五5班参赛数据（已更新，标注需补充的项目）
        const eventsData = [
            // 十月十四日（上午）
            { date: "10月14日", time: "10:30", event: "五年级混合投篮接力赛", students: "方佳杰等", type: "team" },
            { date: "10月14日", time: "10:50", event: "五年级男子200米预赛", students: "郑思翰, 周彦昕, 吴宸宇", type: "personal" },
            
            // 十月十四日（下午）
            { date: "10月14日", time: "13:30", event: "五年级男子跳高决赛", students: "姜皓宇, 周思辰, 毛明诚", type: "personal" },
            { date: "10月14日", time: "14:20", event: "五年级男子60米预赛", students: "郑思翰, 方佳杰, 项俊天", type: "personal" },
            { date: "10月14日", time: "14:30", event: "五年级女子60米预赛", students: "郑语萱, 孙屹彤, 徐歆冉", type: "personal" },
            { date: "10月14日", time: "14:30", event: "五年级女子跳高决赛", students: "柴钇帆, 毛诗苹, 徐歆冉", type: "personal" },
            
            // 十月十五日（上午）
            { date: "10月15日", time: "8:30", event: "五年级男子足球射门决赛", students: "姜胜译, 王铭佑, 周彦昕", type: "personal" },
            { date: "10月15日", time: "8:50", event: "五年级男子800米决赛", students: "尤处骁, 毛明宇, 姜胜译", type: "personal" },
            { date: "10月15日", time: "9:00", event: "五年级女子800米决赛", students: "杨思涵, 姜镔伦, 刘伝汐", type: "personal" },
            { date: "10月15日", time: "9:30", event: "五年级女子足球射门决赛", students: "毛渲棋, 祝弥玥, 柴孜", type: "personal" },
            { date: "10月15日", time: "11:00", event: "五年级男子100米预赛", students: "项俊天, 姜涞, 徐振轩", type: "personal" },
            { date: "10月15日", time: "11:10", event: "五年级女子100米预赛", students: "柴文玖, 孙屹彤, 来言之", type: "personal" },
            
            // 十月十五日（下午）
            { date: "10月15日", time: "14:10", event: "五年级男子60米复赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月15日", time: "14:15", event: "五年级女子60米复赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月15日", time: "15:55", event: "五年级男子200米决赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月15日", time: "16:00", event: "五年级女子200米决赛", students: "待定（根据预赛结果）", type: "personal" },
            
            // 十月十六日（上午）
            { date: "10月16日", time: "8:30", event: "五年级男子后抛实心球决赛", students: "毛明诚, 彭煜凯, 毛明宇", type: "personal" },
            { date: "10月16日", time: "9:30", event: "五年级女子后抛实心球决赛", students: "周楚婷, 王雨欣, 吴芷静", type: "personal" },
            { date: "10月16日", time: "9:40", event: "五年级男子100米决赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月16日", time: "9:45", event: "五年级女子100米决赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月16日", time: "10:40", event: "五年级男子60米决赛", students: "待定（根据预赛结果）", type: "personal" },
            { date: "10月16日", time: "10:45", event: "五年级女子60米决赛", students: "待定（根据预赛结果）", type: "personal" },
            
            // 十月十六日（下午）
            { date: "10月16日", time: "13:30", event: "五年级男子跳远决赛", students: "毛若霖, 姜皓宇, 吴晟宁", type: "personal" },
            { date: "10月16日", time: "14:30", event: "五年级女子跳远决赛", students: "柴孜, 毛诗苹, 来言之", type: "personal" },
            { date: "10月16日", time: "14:45", event: "五年级男子6×200米接力决赛", students: "姜皓宇等", type: "team" },
            { date: "10月16日", time: "15:00", event: "五年级女子6×200米接力决赛", students: "毛渲棋等", type: "team" },
            
            // 十月十七日（上午）
            { date: "10月17日", time: "9:50", event: "五年级男子400米决赛", students: "尤处骁, 姜郎, 姜泓", type: "personal" },
            { date: "10月17日", time: "10:10", event: "五年级女子400米决赛", students: "周楚婷, 杨思涵, 朱瑜锌", type: "personal" }
        ];

        // 页面加载时显示所有数据
        document.addEventListener('DOMContentLoaded', function() {
            displayEvents(eventsData);
            updateStats(eventsData);
        });

        // 显示事件列表
        function displayEvents(events) {
            const tbody = document.getElementById('resultsBody');
            tbody.innerHTML = '';
            
            if (events.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="no-results">未找到匹配的参赛项目</td></tr>';
                return;
            }
            
            events.forEach(event => {
                const row = document.createElement('tr');
                
                // 高亮搜索关键词
                let studentsHtml = event.students;
                const searchInput = document.getElementById('searchInput').value.trim();
                if (searchInput) {
                    const regex = new RegExp(searchInput, 'gi');
                    studentsHtml = studentsHtml.replace(regex, match => `<span class="highlight">${match}</span>`);
                }
                
                row.innerHTML = `
                    <td>${event.date}</td>
                    <td>${event.time}</td>
                    <td>${event.event}</td>
                    <td>${studentsHtml}</td>
                    <td><span class="event-type ${event.type}">${event.type === 'personal' ? '个人' : '集体'}</span></td>
                `;
                
                tbody.appendChild(row);
            });
        }

        // 更新统计信息
        function updateStats(events) {
            document.getElementById('totalCount').textContent = events.length;
            
            // 计算参赛学生人数（排除"待定"）
            const allStudents = events.flatMap(event => 
                event.students.split(',').map(s => s.trim())
                    .filter(s => s && !s.includes('待定'))
            );
            const uniqueStudents = [...new Set(allStudents)];
            document.getElementById('studentCount').textContent = uniqueStudents.length;
            
            // 计算个人和集体项目数量
            const personalCount = events.filter(event => event.type === 'personal').length;
            const teamCount = events.filter(event => event.type === 'team').length;
            
            document.getElementById('personalCount').textContent = personalCount;
            document.getElementById('teamCount').textContent = teamCount;
        }

        // 搜索功能
        function searchEvents() {
            const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();
            const dateFilter = document.getElementById('dateFilter').value;
            const typeFilter = document.getElementById('typeFilter').value;
            
            let filteredEvents = eventsData.filter(event => {
                // 学生姓名匹配
                const studentMatch = event.students.toLowerCase().includes(searchTerm);
                
                // 日期匹配
                const dateMatch = !dateFilter || event.date === dateFilter;
                
                // 类型匹配
                const typeMatch = !typeFilter || event.type === typeFilter;
                
                return studentMatch && dateMatch && typeMatch;
            });
            
            displayEvents(filteredEvents);
            updateStats(filteredEvents);
        }

        // 重置搜索
        function resetSearch() {
            document.getElementById('searchInput').value = '';
            document.getElementById('dateFilter').value = '';
            document.getElementById('typeFilter').value = '';
            displayEvents(eventsData);
            updateStats(eventsData);
        }

        // 支持按Enter键搜索
        document.getElementById('searchInput').addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                searchEvents();
            }
        });
    </script>
</body>
</html>